#container {
    position: relative;
	width: 100vw;
	height: 100vh;
	/* display: flex;
	align-items: center;
	justify-content: center; */
	overflow: hidden;
}

#background {
	z-index: 100;
	height: 100%;
	width: 100%;
	background-image: url('../imgs/back.png');
	background-repeat: no-repeat;
	background-size: 120%;
    filter: blur(5px);
    transition: all 0.61s ease-in-out;
}

#main_wrap {
    z-index: 111;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /* height: 550px;
    width: 550px;
    background-color:red ;
    border-radius: 50%; */
}

#main{
    position: relative;
    height: 550px;
    width: 550px;
    /* background-color:red ; */
    border-radius: 50%;
}

#show_btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background-color: rgb(255, 227, 214);
    border: 2px solid rgb(255, 212, 212);
    filter: blur(0px);
    /* background-color: aqua; */
    transition: all 0.6s linear;
    box-shadow: 0px 0px 3px 2px rgb(255, 152, 152) inset;
    
}

#show_btn:hover{
    filter: blur(1px);
}

#show_btn>img{
    height: 25px;
    width:25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /* transform-origin: 0% 0% ; */
    transition: all 0.5s ease-in-out;
   
}

#show_btn:hover>img{
    transform: translate(-50%,-50%) rotate(225deg);
    
}


.btn{
    position: absolute;
    top: 50%;
    transform: translate(0,-50%);
    height: 60px;
    width: 60px;
    border-radius: 50%;
    background-color: rgb(255, 227, 214);
    border: 2px solid rgb(255, 212, 212);
    filter: blur(0px);
    /* background-color: aqua; */
    transition: all 0.5s ease-in-out;
    box-shadow: 0px 0px 3px 2px rgb(255, 152, 152) inset;
}

#btn1 img{
    height: 40px;
    width:40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /* transform-origin: 0% 0% ; */
    transition: all 0.5s ease-in-out;
}

#btn2 img{
    height: 40px;
    width:40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /* transform-origin: 0% 0% ; */
    transition: all 0.5s ease-in-out;
}

#btn3 img{
    height: 40px;
    width:40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /* transform-origin: 0% 0% ; */
    transition: all 0.5s ease-in-out;
}

#btn4 img{
    height: 40px;
    width:40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /* transform-origin: 0% 0% ; */
    transition: all 0.5s ease-in-out;
}

#btn5 img{
    height: 40px;
    width:40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /* transform-origin: 0% 0% ; */
    transition: all 0.5s ease-in-out;
}

#btn6 img{
    height: 40px;
    width:40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    /* transform-origin: 0% 0% ; */
    transition: all 0.5s ease-in-out;
}

#main li{
    display: none;
    /* transform: rotate(calc(360deg/6*var(--i))) translate(-30px,-30px); */
    transform-origin: 275px 0px;
    transition-delay: calc(0.1s*var(--i));
    transform: translate(245px,-50%);
}

#word{
    position: absolute;
    top: 5%;
    height: 200px;
    width: 100%;
    /* background-color: aqua; */
    text-align: center;
    /* font-size: 130px; */
    font-family:'北方行书';
    filter: blur(0px);
}
.commword{
   
    color: rgb(255, 255, 255);
    text-shadow: 3px 3px 4px rgb(255, 204, 204);
    display: inline-block;
    font-size: 180px;
    font-family:'北方行书';
    filter: blur(0px);
    transition: all 1s ease-in-out;
}
#word1{
    display: none;
    position: absolute;
    font-size: 210px;
    top: 1%;
    left: 27%;
    
}
#word2{
    display: none;
    position: absolute;
    top: 14%;
    left: 40%;
}

#word3{
    display: none;
    font-size: 240px;
    position: absolute;
    top: 1%;
    left: 50%;
}

#word4{
    display: none;
    position: absolute;
    top: 10%;
    left: 65%;
}

#next_web {
	position: absolute;
	bottom: 0%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url('../../imgs/down.png');
	background-size: 100%;
	height: 60px;
	width: 60px;
	transition: all 0.5s linear;
}

#next_web:hover {
	bottom: 1%;
}